<!DOCTYPE html>
<html class=" js csstransforms3d" lang="en"><head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <meta charset="utf-8">

        <!-- disable zooming -->
        <meta name="viewport" content="initial-scale=1.0, user-scalable=0">

        <title>Card 1 · Intro to CSS 3D transforms › Examples</title>

        <link rel="stylesheet" href="card-01_files/style.css" media="screen">


        <style media="screen">
            .container {
                width: 200px;
                height: 260px;
                position: relative;
                margin: 0 auto 40px;
                border: 1px solid #CCC;
                -webkit-perspective: 800px;
                -moz-perspective: 800px;
                -ms-perspective: 800px;
                -o-perspective: 800px;
                perspective: 800px;
            }

            #card {
                width: 100%;
                height: 100%;
                position: absolute;
                -webkit-transition: -webkit-transform 1s;
                -moz-transition: -moz-transform 1s;
                -ms-transition: -ms-transform 1s;
                -o-transition: -o-transform 1s;
                transition: transform 1s;
                -webkit-transform-style: preserve-3d;
                -moz-transform-style: preserve-3d;
                -ms-transform-style: preserve-3d;
                -o-transform-style: preserve-3d;
                transform-style: preserve-3d;
            }

            #card.flipped {
                -webkit-transform: rotateY( 180deg );
                -moz-transform: rotateY( 180deg );
                -ms-transform: rotateY( 180deg );
                -o-transform: rotateY( 180deg );
                transform: rotateY( 180deg );
            }

            #card figure {
                display: block;
                height: 100%;
                width: 100%;
                line-height: 260px;
                color: white;
                text-align: center;
                font-weight: bold;
                font-size: 140px;
                position: absolute;
                -webkit-backface-visibility: hidden;
                -moz-backface-visibility: hidden;
                -ms-backface-visibility: hidden;
                -o-backface-visibility: hidden;
                backface-visibility: hidden;
            }

            #card .front {
                background: red;
            }

            #card .back {
                background: blue;
                -webkit-transform: rotateY( 180deg );
                -moz-transform: rotateY( 180deg );
                -ms-transform: rotateY( 180deg );
                -o-transform: rotateY( 180deg );
                transform: rotateY( 180deg );
            }
        </style>

    </head>
    <body>

        <h1>Card 1</h1>

        <section class="container">
            <div class=" " id="card">
                <figure class="front">1</figure>
                <figure class="back">2</figure>
            </div>
        </section>

        <section id="options">
            <p><button id="flip">Flip Card</button></p>
        </section>

        <script src="card-01_files/utils.js"></script>
        <script src="card-01_files/flip-card.js"></script>



        <footer>
            <p id="disclaimer">Sorry, your browser does not support CSS 3D transforms. Try viewing this page in <a href="http://www.apple.com/safari/">Safari</a>, <a href="http://www.google.com/chrome">Chrome</a>, <a href="http://www.mozilla.org/en-US/firefox/channel/">Firefox Aurora</a>, or on an iOS device.</p>
            <p>Example for <a href="http://desandro.github.com/3dtransforms/">Intro to CSS 3D transforms</a> by David DeSandro</p>
        </footer>


    </body></html>